<template>
  <div class="item" @click="$router.push(`/detail/${item.goods_id}`)">
    <div class="left">
      <img :src="item.goods_image" alt="">
    </div>
    <div class="right">
      <p class="tit text-ellipsis-2"> {{ item.goods_name }}</p>
      <p class="count">已售 {{ item.goods_sales }} 件</p>
      <p class="price">
        <span class="new">¥{{ item.goods_price_min }}</span>
        <span class="old">{{ item.goods_price_max }}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }
}
</script>

<style lang="less" scoped>
.item {
  display: flex;
  background-color: white;
  margin-bottom: 5px;
  padding: 10px;
  .left img {
    display: block;
    width: 90px;
    height: 90px;
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding-left: 10px;
    .tit {
      font-size: 16px;
      color: #333;
    }
    .count {
      color: #999;
      font-size: 13px;
    }
    .price {
      .new {
        color: #f03c3c;
        font-size: 20px;
      }
      .old {
        margin-left: 10px;
        color: #999;
        font-size: 13px;
        text-decoration: line-through;
      }
    }
  }
}
</style>
